.main{
	margin: 0 0 20px 0;
	.share-title{
		margin: 0 0 20px 0;
		padding: 0;
		.single-title{
			overflow: hidden;
			h1 {
				font-size: 19px;
				margin: 0 0 5px 58px;
				font-weight: bold;
				line-height: 1.1;
			}
			.shot-byline {
				margin-left: 60px;
				font-weight: normal;
				line-height: 1.4;
				color: @gray;
				a {
					font-weight: bold;
				}
				.shot-byline-user{
					float: left;
				}
				.badge {
					float: left;
					margin: 0 0 0 5px;
				}
				.screenshot-dash {
					float: left;
					margin: 2px 0 0 12px;
					font-size: @smallFont;
					color: @gray;
				}
			}
		}
	}
	.plain-shot {
		
		
	}
	.attachinfo{
		color: @gray;
		text-decoration: underline;
		font-size: @smallFont;
	}
	.shot-image {
			display: inline-block;
			max-width: 460px;
			margin-bottom: 10px;
			background: @white;
			padding: 5px;
			text-align: center;
			.border-radius(6px);
			.box-shadow(0 1px 2px rgba(0, 0, 0, 0.07));
			img {
				max-width: 460px;
				background: @imageBg;
				overflow: hidden;
			}
		}
		.shot-pic-desc {
			text-align: left;
			font-size: @largeFont;
			color: darken(@gray,20%);
			padding: 6px 0 0px 0;
			clear: both;
			.sup-ico {
				display: inline;
				padding: 0px 0 5px 25px;
				margin-right: 6px;
				background: url(@{imagePath}/spr-q.png) no-repeat 0 0;
				zoom: 1;
			}
			.sub-ico {
				display: inline;
				padding: 0px 0 5px 25px;
				margin-left: 6px;
				background: url(@{imagePath}/spr-q.png) no-repeat 0 -43px;
				zoom: 1;
			}
		}
	.shot-video {
			display: inline-block;
			width: 470px;
			height:353px;
			margin-bottom: 10px;
			background-color: @black;
	}
	.the-shot {
		float: left;
		margin: 20px 0 10px 0;
		width: 440px;
		.single {
			display:inline-block;
			width: 400px;
			min-height: 300px;
			padding: 20px;
			background: white;
			text-align: center;
			.border-radius(3px);
			.box-shadow(0 1px 2px rgba(0, 0, 0, 0.07));
			.single-grid {
				display: table;
				width: 400px;
				height: 400px;
				background: @imageBg;
				overflow: hidden;
				table-layout:fixed;
				.single-img {
					display: table-cell;
					vertical-align: middle;
					text-align: center;
					overflow: hidden;
					img{
						max-width: 400px;
						max-height: 400px;
						cursor: pointer;
					}
				}
			}
			.thumbs{
				margin-top:8px;
				display: table;
				ul{
					list-style:none;
					margin: 0px;
					li{
						float:left;
						.size(50px,50px);
						overflow:hidden;
						display:block;
						margin: 2px 2px 2px 0px;
						&.on{
							.size(46px,46px);
							border:2px solid @puzzColor;
						}
						img{
							.size(50px,50px);
						}
					}
				}
			}
		}
	}
	.screenshot-meta {
		float: right;
		margin: 0px 0px 0 0;
		width: 220px;
	}
	.affix {
		top: 51px;
	}
	.the-desc {
		float: left;
		margin: 10px 0 10px 0;
		font-size: @mediumFont;
		color: darken(@gray,20%);
		line-height: 1.8;
		.desc {
			width: 680px;
			padding: 10px 20px 10px 0px;
		}
	}
	
	.the-comment {
		float: left;
		margin: 0px 0 10px 0;
		font-size: @mediumFont;
		width: 680px;
		padding: 10px 20px 10px 0px;
		h4{
			padding: 0 0 10px 0;
			border-bottom: 2px solid @borderColor;
		}
	}
	
	.article-detail{
		font-size:@mediumFont;
		text-align: justify;
		color: darken(@gray,20%);
		line-height: 1.8;
		.screenshot-meta {
			margin-top:0px;
		}
	}
}
.secondary{
	float: right;
	.ad{
		float: left;
		margin: 0 0 20px 0;
		width: 198px;
		padding: 10px;
		min-height:200px;
		.black05bg;
		font-size: @smallFont;
		font-weight: normal;
		text-align: center;
		color: rgba(0, 0, 0, 0.6);
		border: 1px solid @borderColor;
		.border-radius(6px);
	}
	h4{
		background: @borderBack;
		font-size: @mediumFont;
		padding: 0 0 8px 0;
		margin: 0 0 10px 0;
		line-height:1;
		span.meta {
			font-weight: normal;
			color: @gray;
		}
	}
	.profile-data {
		margin: 0 0 20px 0;
	}
	p.copy{
		margin: 0 0 25px 0;
		color: darken(@gray,20%);
		line-height: 1.5;
	}
	.nums{
		color: darken(@gray,20%);
		overflow:hidden;
		dl{
			margin: 0 0 25px 0;
			overflow:hidden;
		}
		dd,dt {
			float: left;
			overflow: hidden;
			height: 1.6em;
			line-height: 1.6em;
			display: block;
			font-size: @smallFont;
		}
		dt {
			margin-right: 3px;
			width: 40px;
		}
		dd {
			margin-right: 5px;
			width: 50px;
		}
	}
	
	
}
.kbd{
	clear: both;
	p {
		margin: 0;
		padding: 30px 0 0 0;
		font-size: 12px;
		text-align: center;
		color: @grayLight;
		border-top: @border;
		.transition(color 0.3s ease);
		&:hover,&:hover a {
			color: @grayDark;
		}
		a{
			color: @grayLight;
		}
	}
	span {
	  margin: 0 20px;
	}
}
.meta-act {
	border-bottom: @border;
	.meta-act-link {
		display: inline-block;
		padding: 8px 12px 8px 35px;
		font-weight: bold;
		color: @grayDark;
		background-repeat: no-repeat;
		background-position: 12px 50%;
		z-index: 5;
	}
	em {
		font-style: normal;
		font-weight: normal;
		color: @gray;
	}
	a.meta-act-link:hover {
	  color: lighten(@grayDark,5%);
	  background-color: rgba(255, 255, 255, 0.5);
	}
	.meta-like {
		background-image: url(@{imagePath}/icon-like16.png);
	}
	.meta-liked {
		background-image: url(@{imagePath}/icon-liked16.png);
		color:@puzzColor;
	}
	.meta-tweet {
		background-image: url(@{imagePath}/icon-tweet16.png);
	}
	.meta-geo {
		background-image: url(@{imagePath}/icon-geo16.png);
	}
	.meta-shopping {
		background-image: url(@{imagePath}/icon-shopping16.png);
	}
	.meta-rss {
		background-image: url(@{imagePath}/icon-rss16.png);
		a{
			float:left;
			display:inline-block;
			overflow: hidden;
		}
		i{
			margin-right: 5px;
		}
	}
	.meta-views {
		background-image: url(@{imagePath}/icon-views16.png);
	}
	.meta-share {
		background-image: url(@{imagePath}/icon-short16.png);
		a {
			margin: 0;
			padding: 0;
			font-family: @baseFontFamily;
			line-height: 1;
			font-weight: bold;
			color: @grayDark;
		}
	}
	.meta-color {
		background-image: url(@{imagePath}/icon-colordrop16.png);
	}
	
}

.processing {
	background: url(@{imagePath}/spinner-small.gif) no-repeat 7px 50% !important;
	color:@puzzColor;
	.icon-heart,.iconlove-red{
		background:none;
	}
}
ul.color-chips {
	margin: 0;
	.border-radius(5px);
	display:inline-block;
	list-style:none;
	li {
		margin: 0;
		float: left;
		a {
			float: left;
			.size(18px,25px);
			z-index: 1;
			display:block;
			text-indent: -9999px;
			&:hover {
				position: relative;
				margin: -4px;
				.size(26px,33px);
				.border-radius(3px);
				.box-shadow(0 0 3px rgba(0, 0, 0, 0.6));
				z-index: 2;
			}
		}
	}
	
	li.current a, li.current a:hover {
		position: relative;
		margin: -4px;
		border: 4px solid white;
		.box-shadow(0 0 3px rgba(0, 0, 0, 0.6));
		.border-radius(3px);
		z-index: 2;
	}
}
ul.color-chips {
	margin: 0;
	.border-radius(5px);
	display:inline-block;
	list-style:none;
	li {
		margin: 0;
		float: left;
		a {
			float: left;
			.size(18px,25px);
			z-index: 1;
			display:block;
			text-indent: -9999px;
			&:hover {
				position: relative;
				margin: -4px;
				.size(26px,33px);
				.border-radius(3px);
				.box-shadow(0 0 3px rgba(0, 0, 0, 0.6));
				z-index: 2;
			}
		}
	}
	
	li.current a, li.current a:hover {
		position: relative;
		margin: -4px;
		border: 4px solid white;
		.box-shadow(0 0 3px rgba(0, 0, 0, 0.6));
		.border-radius(3px);
		z-index: 2;
	}
}
h4.meta-head{
	padding: 10px 10px 0px 10px;
}
ul.favorite-list{
	margin-left: 0px;
	margin-bottom:20px;
	list-style: none;
	display: inline-block;
	overflow: hidden;
	li{
		float:left;
	}
	
}
/* comments */
#comments-section {
  float: left;
  width: 440px;
  margin: 25px 0;
}
ol.comments{
	list-style: none;
	margin: 20px 0 0 0;
}
ol.comments li {
  position: relative;
}

ol.comments li.response {
  float: none;
  width: auto;
  margin: 0 0 15px 0;
  padding: 0;
  font-size: 1em;
  line-height: 1.4em;
  color: @grayDark;
  border-bottom: @border;
}

ol.comments li:last-child {
  border-bottom: none;
}

ol.comments li h2 a:hover img {
  opacity: .8;
}

ol.comments li div.comment-body {
  margin: 0 10px 0 42px;
  overflow: hidden;
}

ol.comments li div.comment-body p {
  margin: 0 0 5px 0;
  padding: 0;
}

ol.comments li div.comment-body p code {
  font-family: Monaco, monospace;
  font-size: 1.1em;
  color: @gray;
}

ol.comments li a.posted:hover {
  text-decoration: none;
  color: @gray;
}

ol.comments li p.comment-meta {
  margin: 0 0 15px 42px;
  font-size: .75em;
  line-height: 1;
  color: @gray;
}

ol.comments li p.comment-meta a {
  color: @gray;
}

ol.comments li p.comment-meta a:hover {
  color: @gray;
}

ol.comments li p.comment-meta span.sep {
  margin: 0 3px;
}
ol.comments li p.comment-meta a.others {
  font-weight: bold;
  color: @puzzColor;
}
ol.comments li p.comment-meta a.btn {
  color: white;
}

.scrollBtn{
	width: 54px;
	z-index: 2;
	ul{
		margin:0px;
	}
	&>ul>li {
		float: left;
		.size(54px,54px);
		margin-bottom: 5px;
		overflow: hidden;
		list-style:none;
		.opacity(60);
		background-color: lighten(@puzzColor,15%);
		.transition(opacity 0.2s ease);
		&>a{
			color: @white;
			display: block;
			.size(54px,54px);
			overflow: hidden;
			text-align: center;
			b{
				display: none;
			}
			em,i{
				font-style: normal;
				display: inline-block;
				margin-top: 33px;
			}
		}
		&:hover {
			.opacity(100);
			.box-shadow(0 1px 2px 0 rgba(0, 0, 0, 0.22));
			filter:progid:DXImageTransform.Microsoft.Shadow(color=#adacac,direction=135,strength=2);
		}
		.extension{
			height: 54px;
			background-color: @white;
			overflow: hidden;
			line-height: 54px;
			a{
				color:@grayDark;
			}
		}
	}
	.sB-home>a {
		background: url(@{imagePath}/backtohome.png) no-repeat 0 0;
	}
	.sB-like>a {
		background: url(@{imagePath}/heart-white.png) no-repeat center 7px;
	}
	.sB-view>a {
		background: url(@{imagePath}/eye-white.png) no-repeat center 5px;
	}
	.sB-link>a {
		background: url(@{imagePath}/link-white.png) no-repeat center center;
	}
	.sB-shopping>a {
		background: url(@{imagePath}/shopping-white.png) no-repeat center 5px;
	}
	.sB-rss>a {
		background: url(@{imagePath}/rss-white.png) no-repeat center center;
	}
	.sB-comment>a {
		background: url(@{imagePath}/comment-white.png) no-repeat center 7px;
	}
	.sB-color {
		background: white;
		li.color{
			background: white;
			width: 35px;
			height: 35px;
			margin: 17px 0 0 15px;
			overflow: visible;
		}
	}
}
